<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视口检测测试 - 抖音视频下载器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #000;
            color: white;
        }
        .video-feed {
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding: 20px;
        }
        .video-item {
            position: relative;
            width: 100%;
            max-width: 400px;
            margin: 0 auto;
            border: 2px solid #333;
            border-radius: 8px;
            overflow: hidden;
            background: #111;
        }
        .video-item.active {
            border-color: #fe2c55;
            box-shadow: 0 0 20px rgba(254, 44, 85, 0.3);
        }
        .video-item.visible {
            border-color: #00ff00;
        }
        video {
            width: 100%;
            height: auto;
            display: block;
        }
        .video-info {
            padding: 10px;
            background: rgba(0, 0, 0, 0.8);
        }
        .video-title {
            font-weight: bold;
            margin-bottom: 5px;
        }
        .video-status {
            font-size: 12px;
            color: #ccc;
        }
        .controls {
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.8);
            padding: 15px;
            border-radius: 8px;
            z-index: 1000;
        }
        .controls button {
            display: block;
            width: 100%;
            padding: 8px 12px;
            margin: 5px 0;
            background-color: #fe2c55;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .controls button:hover {
            background-color: #d91f43;
        }
        .debug-info {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.9);
            padding: 15px;
            border-radius: 8px;
            max-width: 400px;
            max-height: 300px;
            overflow-y: auto;
            font-family: monospace;
            font-size: 12px;
            z-index: 1000;
        }
        .viewport-indicator {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 2px;
            height: 100px;
            background: #fe2c55;
            z-index: 999;
            pointer-events: none;
        }
        .viewport-indicator::before {
            content: '';
            position: absolute;
            left: -4px;
            top: 50%;
            width: 10px;
            height: 2px;
            background: #fe2c55;
        }
        .scroll-hint {
            position: fixed;
            top: 50%;
            left: 20px;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.8);
            padding: 10px;
            border-radius: 4px;
            font-size: 12px;
            z-index: 1000;
        }
    </style>
</head>
<body>
    <div class="viewport-indicator"></div>
    
    <div class="controls">
        <h3>控制面板</h3>
        <button onclick="testDetection()">测试检测</button>
        <button onclick="playAll()">播放所有</button>
        <button onclick="pauseAll()">暂停所有</button>
        <button onclick="scrollToCenter()">滚动到中心</button>
        <button onclick="clearLog()">清除日志</button>
    </div>
    
    <div class="scroll-hint">
        ← 滚动页面测试视口检测
    </div>
    
    <div class="debug-info" id="debugInfo">
        <div>等待测试...</div>
    </div>
    
    <div class="video-feed">
        <div class="video-item" id="video1">
            <video controls>
                <source src="https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_1mb.mp4" type="video/mp4">
            </video>
            <div class="video-info">
                <div class="video-title">视频1 - 测试视频</div>
                <div class="video-status">状态: 未播放</div>
            </div>
        </div>
        
        <div class="video-item" id="video2">
            <video controls>
                <source src="https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_2mb.mp4" type="video/mp4">
            </video>
            <div class="video-info">
                <div class="video-title">视频2 - 另一个测试</div>
                <div class="video-status">状态: 未播放</div>
            </div>
        </div>
        
        <div class="video-item" id="video3">
            <video controls>
                <source src="https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_5mb.mp4" type="video/mp4">
            </video>
            <div class="video-info">
                <div class="video-title">视频3 - 第三个测试</div>
                <div class="video-status">状态: 未播放</div>
            </div>
        </div>
        
        <div class="video-item" id="video4">
            <video controls>
                <source src="https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_1mb.mp4" type="video/mp4">
            </video>
            <div class="video-info">
                <div class="video-title">视频4 - 第四个测试</div>
                <div class="video-status">状态: 未播放</div>
            </div>
        </div>
        
        <div class="video-item" id="video5">
            <video controls>
                <source src="https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_2mb.mp4" type="video/mp4">
            </video>
            <div class="video-info">
                <div class="video-title">视频5 - 第五个测试</div>
                <div class="video-status">状态: 未播放</div>
            </div>
        </div>
    </div>

    <script>
        const videos = document.querySelectorAll('video');
        const videoItems = document.querySelectorAll('.video-item');
        
        function log(message, type = 'info') {
            const debugInfo = document.getElementById('debugInfo');
            const logEntry = document.createElement('div');
            logEntry.style.color = type === 'error' ? '#ff4444' : 
                                  type === 'success' ? '#44ff44' : 
                                  type === 'warning' ? '#ffaa00' : '#ffffff';
            logEntry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
            debugInfo.appendChild(logEntry);
            debugInfo.scrollTop = debugInfo.scrollHeight;
        }
        
        function clearLog() {
            document.getElementById('debugInfo').innerHTML = '<div>日志已清除</div>';
        }
        
        function updateVideoStatus() {
            videos.forEach((video, index) => {
                const statusEl = videoItems[index].querySelector('.video-status');
                const status = video.paused ? '暂停' : 
                              video.ended ? '结束' : 
                              video.currentTime > 0 ? '播放中' : '未播放';
                statusEl.textContent = `状态: ${status} (${video.currentTime.toFixed(1)}s)`;
            });
        }
        
        function updateVisibility() {
            const viewportHeight = window.innerHeight;
            const viewportCenter = viewportHeight / 2;
            
            videoItems.forEach((item, index) => {
                const rect = item.getBoundingClientRect();
                const isVisible = rect.width > 0 && rect.height > 0 && 
                                rect.top < viewportHeight && rect.bottom > 0;
                
                item.classList.toggle('visible', isVisible);
                
                // 计算距离中心的距离
                const itemCenter = rect.top + rect.height / 2;
                const distanceFromCenter = Math.abs(itemCenter - viewportCenter);
                
                if (isVisible) {
                    log(`视频${index + 1}: 可见, 距离中心${distanceFromCenter.toFixed(1)}px`, 'info');
                }
            });
        }
        
        function testDetection() {
            log('=== 开始测试视口检测 ===', 'success');
            
            const now = Date.now();
            const viewportHeight = window.innerHeight;
            const viewportCenter = viewportHeight / 2;
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            
            log(`视口信息: 高度=${viewportHeight}, 中心=${viewportCenter}, 滚动=${scrollTop}`, 'info');
            
            const allVideos = Array.from(document.querySelectorAll('video'));
            log(`找到视频元素数量: ${allVideos.length}`, 'info');
            
            // 模拟插件的检测逻辑
            const videoInfo = allVideos.map((video, index) => {
                const rect = video.getBoundingClientRect();
                const isVisible = rect.width > 0 && rect.height > 0 && 
                                rect.top < viewportHeight && rect.bottom > 0;
                
                const videoCenter = rect.top + rect.height / 2;
                const distanceFromCenter = Math.abs(videoCenter - viewportCenter);
                
                const visibleHeight = Math.min(rect.bottom, viewportHeight) - Math.max(rect.top, 0);
                const visibleRatio = Math.max(0, visibleHeight / rect.height);
                
                let playScore = 0;
                if (!video.paused && !video.ended && video.currentTime > 0) {
                    playScore = 100;
                } else if (video.currentTime > 0) {
                    playScore = 50;
                } else if (video.readyState >= 2) {
                    playScore = 25;
                }
                
                return {
                    video,
                    index,
                    rect,
                    isVisible,
                    distanceFromCenter,
                    visibleRatio,
                    playScore,
                    currentTime: video.currentTime,
                    duration: video.duration,
                    paused: video.paused,
                    ended: video.ended,
                    readyState: video.readyState
                };
            });
            
            log('视频详细信息:', 'info');
            videoInfo.forEach((info, index) => {
                log(`  视频${index + 1}: 可见=${info.isVisible}, 播放分数=${info.playScore}, 距离中心=${info.distanceFromCenter.toFixed(1)}, 可见比例=${info.visibleRatio.toFixed(2)}`, 'info');
            });
            
            const sortedVideos = videoInfo
                .filter(info => info.isVisible)
                .sort((a, b) => {
                    if (a.playScore !== b.playScore) {
                        return b.playScore - a.playScore;
                    }
                    if (Math.abs(a.distanceFromCenter - b.distanceFromCenter) > 10) {
                        return a.distanceFromCenter - b.distanceFromCenter;
                    }
                    return b.visibleRatio - a.visibleRatio;
                });
            
            log('排序后的视频:', 'info');
            sortedVideos.forEach((info, index) => {
                log(`  ${index + 1}. 视频${info.index + 1}: 播放分数=${info.playScore}, 距离中心=${info.distanceFromCenter.toFixed(1)}`, 'success');
            });
            
            if (sortedVideos.length > 0) {
                const selectedVideo = sortedVideos[0];
                log(`✅ 选择的视频: 视频${selectedVideo.index + 1}`, 'success');
                
                // 高亮选中的视频
                videoItems.forEach(item => item.classList.remove('active'));
                videoItems[selectedVideo.index].classList.add('active');
            } else {
                log('❌ 没有找到合适的视频', 'error');
            }
        }
        
        function playAll() {
            videos.forEach(video => video.play());
            log('播放所有视频', 'success');
        }
        
        function pauseAll() {
            videos.forEach(video => video.pause());
            log('暂停所有视频', 'warning');
        }
        
        function scrollToCenter() {
            const centerVideo = document.querySelector('.video-item:nth-child(3)');
            centerVideo.scrollIntoView({ behavior: 'smooth', block: 'center' });
            log('滚动到中心视频', 'info');
        }
        
        // 事件监听
        videos.forEach((video, index) => {
            video.addEventListener('play', () => {
                log(`视频${index + 1} 开始播放`, 'success');
                updateVideoStatus();
            });
            
            video.addEventListener('pause', () => {
                log(`视频${index + 1} 暂停`, 'warning');
                updateVideoStatus();
            });
            
            video.addEventListener('ended', () => {
                log(`视频${index + 1} 播放结束`, 'warning');
                updateVideoStatus();
            });
            
            video.addEventListener('timeupdate', () => {
                updateVideoStatus();
            });
        });
        
        // 监听滚动事件
        window.addEventListener('scroll', () => {
            updateVisibility();
        });
        
        // 监听窗口大小变化
        window.addEventListener('resize', () => {
            updateVisibility();
        });
        
        // 初始化
        log('视口检测测试页面已加载', 'success');
        log('请滚动页面并点击"测试检测"按钮', 'info');
        updateVisibility();
        updateVideoStatus();
    </script>
</body>
</html> 